<template>
  <footer id="footer">
    <el-row type="flex" align="middle" justify="space-around">
      <el-col :span="4">
        <router-link tag="li" to="/home">
          <i class="el-icon-house"></i>
          <p>首页</p>
        </router-link>
      </el-col>
      <el-col :span="4">
        <router-link tag="li" to="/movie">
          <i class="el-icon-film"></i>
          <p>电影</p>
        </router-link>
      </el-col>
      <el-col :span="4">
        <router-link tag="li" to="/music">
          <i class="el-icon-service"></i>
          <p>音乐</p>
        </router-link>
      </el-col>
      <el-col :span="4">
        <router-link tag="li" to="/mine">
          <i class="el-icon-user-solid"></i>
          <p>我的</p>
        </router-link>
      </el-col>
    </el-row>
  </footer>
</template>

<script>
    export default {
        name: "Footer"
    }
</script>

<style scoped>
#footer{
  width: 100%;height:50px; background: white; border-top:2px #ebe8e3 solid;
  position: fixed;bottom: 0;left: 0;
}
#footer .el-col{text-align: center}
#footer .active{ color: #4c7bc1;}
#footer .router-link-active{ color:#4c7bc1;}
#footer i{ font-size: 25px;}
#footer p{ font-size: 20px; line-height: 18px;}
</style>
